<template>
        <div class="common-layout">
          <el-container>
            <el-aside width="300px">
                <div class="logo-container" @click="showLogoUpdate">
                    <img :src=logoSrc width="100%"/>
                    <!-- <img src="../assets/img/blank.jpg"width="100%" /> -->
                </div>
                <div class="menu-container">
                    <MenuList ></MenuList>
                </div>
            </el-aside>
            <el-main>
                    <div class="top">
                        <Tab></Tab>
                    </div>
                    <div class="bread">
                       <BreadCrumb></BreadCrumb>
                    </div>
                    <div class="content">
                        <router-view/>
                        <!-- <button @click="open2"></button> -->
                        <div class="relative" v-if="isDialog">
                          <div class="contents">
                            <div @click="goClick" class="poiner">
                              <div class="line">
                            <img src="../assets/img/notice.png" alt="">
                            </div>
                            <div class="font">
                              {{state.patient.patientName}}！您有新的报告，请点击查看！<br/>
                               报告时间：{{ state.patient.createTime }}
                            </div>
                            </div>
                          <div @click="open3" class="poiner">
                            <el-icon @click="open3"><Close /></el-icon>
                          </div>
                          </div>
                        </div>
                    </div>
            </el-main>
          </el-container>
        </div>
        <updateLogo v-model="showUpdateLogo" @callParent="updateLogoFromChild" :showAdd="showUpdateLogo" @confirm="updateLogoConfirm" @cancle="updateLogoCancle"></updateLogo>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import MenuList  from '../components/menuList/index.vue'
import Tab from '../components/tab/index.vue' 
import updateLogo from './home/updateLogo.vue'
import logo from '../assets/img/logo.png'
import { getLogo } from "@/api/account/index";
import router from '@/router';
// import { ElNotification } from 'element-plus'
// import { io } from 'socket.io-client'
// import type { Socket } from 'socket.io-client'
const logoSrc = ref(logo);
const isDialog = ref(false)
const showUpdateLogo = ref(false);
// 显示更新logo的model
const showLogoUpdate = () => {
	showUpdateLogo.value = true;
}
// 确定更新logo
const updateLogoConfirm = () => {
	showUpdateLogo.value = false;
	// 调用新增医院列表
	// getHospitalList(data);
}
// 取消更新logo
const updateLogoCancle = () => {
	showUpdateLogo.value = false;
}

const parentMethod = () => {
  getLogo({}).then((e)=>{
        logoSrc.value = e.data.result;
    });
};

const state = reactive({
/** 入参 */
  types:{
    id:'',
    type:'0'
  },
  patient:{
    patientName:'阿斯顿',
    createTime:'2024-08-09',
    pdfName:'',
    taskId:'',
  }
})
function updateLogoFromChild(){
  parentMethod();
}
const task = window.sessionStorage.getItem("token")
onMounted(() => {
    parentMethod();
    console.log('tokentokentokentokentokentokentokentoken',task)
    enterFullscreen()
})

const enterFullscreen = () => {
  const element = document.documentElement; // 获取整个页面的元素
  if (element.requestFullscreen) {
    element.requestFullscreen(); // 标准方法
  }
}
// const open2 = () => {
//   isDialog.value = true
// }
const open3 = () => {
  isDialog.value = false
}
// webSocket实时消息推送
// let socket:Socket
// onUnmounted(() => {
//   socket.close()
// })
// const baseURL = 'ws://10.66.39.142:8090/ws/mci'
// onMounted(async () => {
//   // 建立链接，创建 socket.io 实例
//   socket = io(baseURL, {
//     auth: {
//       token: `window.sessionStorage.getItem("token")`
//     },
//     // query: {
//     //   orderId: route.query.orderId
//     // }
//   })
//   socket.on('connect', () => {
//     // 建立连接成功
//     console.log('connectconnectconnectconnectconnectconnectconnectconnect建立连接成功')
//   })

//   socket.on('error', (event) => {
//     // 错误异常消息
//     console.log('error')
//   })

//   socket.on('disconnect', ()=> { 
//     // 已经断开连接
//     console.log('disconnect')
//   })
// })
// const url = 'ws://10.66.39.142:8090/ws/mci'+''
// var ws = new WebSocket(`ws://10.66.39.142:8090/ws/mci?token=${task}`,)
// onMounted(() => {
//     ws.onopen = function(evt) { 
//           console.log("Connection open ...");
//           ws.send("Hello WebSockets!");
//         };
//         ws.onmessage = function(evt) {
//           console.log( "Received Message: " + evt.data);
//           ws.close();
//         };
//         ws.onclose = function(evt) {
//           console.log("Connection closed.");
//         };
// })

var ws = new WebSocket(`ws://localhost:8090/ws/mci?token=${task}`);
ws.onopen = function(evt) { 
  console.log("Connection open ...");
  ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  let json = JSON.parse(evt.data)
  console.log('json',json)
  state.patient = json
  isDialog.value = true
  setTimeout(() => {
      isDialog.value = false
  }, 10000);
};
ws.onclose = function(evt) {
  console.log("Connection closed.");
};
const goClick = () =>{
  router.push(
    {
      path:'/reportTemplate',
      query:{
        taskId: state.patient.taskId
      }
    }
  )
  let types = {
    id:state.patient.taskId,
    type:'0'
  }
  let jsonString = JSON.stringify(types)
  ws.send(jsonString);
}
</script>

<style lang="scss" scoped>
.common-layout {
	.aside-top {
		height: 100px;
		font-size: 24px;
		font-weight: 700;
		margin-bottom: 20px;
	}

    .logo-container{
        padding-top:50px;
    }
}
.relative {
width: 350px;
height: 100px;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #f1f7ff;
border: 1px solid #ccc;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
padding: 10px;
}
.contents {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.line {
  box-sizing: border-box;
  margin-top: 10px;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  img {
    width: 100%;
    height: 100%;
  }
}
.font {
  font-size: 15px;
  color: #1f1f1f;
  box-sizing: border-box;
  margin-top: -25px;
  margin-left: 45px;
  line-height: 20px;
}
.poiner {
  cursor: pointer;
}
</style>
